import React, { memo } from 'react'
import type { FC } from 'react'
import ListCard from './ListCard'

interface ListItem {
  id: string
  title: string
  category: string
  description: string
  coverImage: string
  itemCount: number
}

interface ListsGridProps {
  lists: ListItem[]
}

// 使用memo优化组件，避免在父组件重新渲染时不必要地重新渲染
const ListsGrid: FC<ListsGridProps> = memo(({ lists }) => {
  if (lists.length === 0) {
    return (
      <div className="text-center py-16 bg-white rounded-xl shadow-md">
        <h3 className="text-xl font-medium text-gray-700 mb-2">暂无清单</h3>
        <p className="text-gray-500">该分类下暂无推荐清单，敬请期待！</p>
      </div>
    )
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 fade-in">
      {lists.map((list) => (
        <ListCard
          key={list.id}
          id={list.id}
          title={list.title}
          category={list.category}
          description={list.description}
          coverImage={list.coverImage}
          itemCount={list.itemCount}
        />
      ))}
    </div>
  )
})

// 为memo提供displayName，有助于调试
ListsGrid.displayName = 'ListsGrid'

export default ListsGrid